<%- include('../../common/header.html',{css:'no-common'}) %>

<link rel="stylesheet" href="../../libs/jcrop/css/jquery.Jcrop.css" type="text/css"/>

<style type="text/css">
    .content {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    /* Apply these styles only when #preview-pane has
       been placed within the Jcrop widget */
    .jcrop-holder #preview-pane {
        display: block;
        position: absolute;
        z-index: 2000;
        top: 10px;
        right: -280px;
        padding: 6px;
        border: 1px #eee solid;
        background-color: white;

        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;

        -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
    }

    /* The Javascript code will set the aspect ratio of the crop
       area based on the size of the thumbnail preview,
       specified here */
    #preview-pane .preview-container {
        width: 107px;
        height: 142px;
        overflow: hidden;
    }

    .img-upload {
        width: 450px;
        height: 450px;
        overflow: hidden;
        border: 1px solid #ddd;
        text-align: center;
    }

    .img-upload img {

        max-width: 100%;
        max-height: 100%;
        display: block;;
    }

    .user-thumb-update .upload-tips {
        display: none;
    }

    .user-thumb-update:hover .upload-tips {
        display: block;
    }

</style>
<title>用户管理-后台管理系统</title>
</head>
<body class="sub-body">
<%- include('../../common/top-nav.html') %>
<%- include('../../common/page-title.html',{navs:[
{label:'首页',url:'../../main.html'},
{label:'系统管理',url:'javascript:void(0)'},
{label:'单位管理',url:'./index.html'},
{label:'公章管理',url:'javascript:void(0)'},
]}) %>
<div class="content" style="padding-top: 0;">
    <div class="panel panel-default">
        <div class="panel-body" style="min-height: 500px;">
            <h3><span class="title">公章管理</span>
                <div class="pull-right btn btn-primary save">保存</div>
            </h3>
            <div class="row">
                <div class="col-md-4">
                    <p style="position: relative;min-height: 233px;" class="user-thumb-update">
                        <img id="bill1" style="position: absolute;width: 50%;border: 1px solid #e1e1e1;"
                             src="../../imgs/chapter.png" alt="">
                        <img class="upload-tips"
                             style="position: absolute;width: 50%;"
                             src="../../imgs/icon_add_image2.png" alt="">
                        <input type="file" id="file1" name="file" style="display: none;">
                    </p>
                </div>
                <div class="col-md-4">
                    <p style="position: relative;min-height: 233px;" class="user-thumb-update">
                        <img id="bill2" style="position: absolute;width: 50%;border: 1px solid #e1e1e1;"
                             src="../../imgs/chapter.png" alt="">
                        <img class="upload-tips"
                             style="position: absolute;width: 50%;"
                             src="../../imgs/icon_add_image2.png" alt="">
                        <input type="file" id="file2" name="file" style="display: none;">
                    </p>
                </div>
                <div class="col-md-4">
                    <p style="position: relative;min-height: 233px;" class="user-thumb-update">
                        <img id="bill3" style="position: absolute;width: 50%;border: 1px solid #e1e1e1;"
                             src="../../imgs/chapter.png" alt="">
                        <img class="upload-tips"
                             style="position: absolute;width: 50%;"
                             src="../../imgs/icon_add_image2.png" alt="">
                        <input type="file" id="file3" name="file" style="display: none;">
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<%- include('../../common/script-ajax-file-upload.html') %>
<%- include('../../common/script-common.html') %>
<script type="text/javascript">
    var form = null, path = '', img_jcrop = null, searchObj = parseSearch();

    $(function () {
        var obj = parseSearch();
        $('.title').html(decodeURI(obj.title) + '公章');
        var query = {};
        $('.save').click(function () {
            if (Object.keys(query).length) {
                query.id = obj.id;
                query.signature = query.bill1;
                query.signaturePaper = query.bill2;
                query.signatureFinance = query.bill3;
                $.post('/com/update', query, function (data) {
                    if (data.code == 200) {
                        fnSuccess && fnSuccess('保存成功!')
                    } else {
                        alert(data.error)
                    }
                })
            } else {
                fnFail && fnFail('您未改动公章!')
            }
        });
        $.get('/com/get?id=' + obj.id, function (data) {
            var goods = data.data;
            if (goods.signature) $("#bill1").attr("src", goods.signature);
            if (goods.signaturePaper) $("#bill2").attr("src", goods.signaturePaper);
            if (goods.signatureFinance) $("#bill3").attr("src", goods.signatureFinance);
        });
        $('.upload-tips').click(function () {
            $(this).siblings('input').click();
        });
        $("#file1").change(function () {
            ajaxFileUpload({
                eleId: 'file1'
            }, function (data) {
                query.bill1 = data.data.path;
                $("#bill1").attr("src", data.data.path);
            });
        });
        $("#file2").change(function () {
            ajaxFileUpload({
                eleId: 'file2'
            }, function (data) {
                query.bill2 = data.data.path;
                $("#bill2").attr("src", data.data.path);
            });
        });
        $("#file3").change(function () {
            ajaxFileUpload({
                eleId: 'file3'
            }, function (data) {
                query.bill3 = data.data.path;
                $("#bill3").attr("src", data.data.path);
            });
        });
    });
</script>

</html>